<template>
  <div>

        <!-- <el-menu default-active="1-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span slot="title">商品管理</span>
                </template>
                <el-menu-item-group>
                    <span slot="title">分组一</span>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                    <el-menu-item index="1-3">选项3</el-menu-item>  
                </el-menu-item-group>
                <el-submenu index="1-4">
                    <span slot="title">选项4</span>
                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
                <i class="el-icon-document"></i>
                <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
            </el-menu-item>
        </el-menu> -->

        <!-- 
            标签名称： el-menu
            属性： attribute
                default-active   1-4-1  默认菜单激活下标
                class   el-menu-vertical-demo
                collapse   isCollapse     是否收起菜单
            事件：
                open    handleOpen
                close   handleClose
         -->


        <!-- <div id="one" @click="fn()">div</div> -->
        
        <!-- 
            <标签名称 属性="属性值" @事件="触发函数">
            属性前面添加 :     说明属性值是变量
            :src=""
         -->

         <el-menu>
             <!-- 菜单项 -->
             <el-menu-item index="1">
                 <!-- 菜单项标题展示的内容 -->
                 <i class="el-icon-s-home"></i>
                 <span slot="title">首页</span>
             </el-menu-item>
             <el-menu-item index="2">
                 <span slot="title">个人信息</span>
             </el-menu-item>
             <el-submenu index="3">
                <template slot="title">
                    <span slot="title">商品管理</span>
                </template>
                <el-menu-item index="3-1">
                    <span slot="title">商品添加</span>
                </el-menu-item>
                <el-menu-item index="3-2">
                    <span slot="title">商品列表</span>
                </el-menu-item>
                <el-submenu index="3-3">
                     <template slot="title">
                        <span slot="title">商品库存管理</span>
                    </template>
                    <el-menu-item index="3-3-1">
                    <span slot="title">商品库存添加</span>
                </el-menu-item>
                <el-menu-item index="3-3-2">
                    <span slot="title">商品库存删除</span>
                </el-menu-item>
                </el-submenu>
             </el-submenu>
         </el-menu>

  </div>
</template>

<script>
 export default {
    data() {
      return {
        isCollapse: false
      };
    },
    methods: {
    //   fn () {},
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>